<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--favicon-->
    <link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
    <!--plugins-->
    <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet" />
    <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
    <link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet" />
    <!-- loader-->
    <link href="assets/css/pace.min.css" rel="stylesheet" />
    <script src="assets/js/pace.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!--		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">-->
    <link href="assets/css/app.css" rel="stylesheet">
    <link href="assets/css/icons.css" rel="stylesheet">
    <!-- Theme Style CSS -->
    <link rel="stylesheet" href="assets/css/dark-theme.css" />
    <link rel="stylesheet" href="assets/css/semi-dark.css" />
    <link rel="stylesheet" href="assets/css/header-colors.css" />
    <title>Rocker - Bootstrap 5 Admin Dashboard Template</title>
</head>

<style>
    ul {
        list-style: none;
    }
</style>

<body>
<div class="wrapper">
    <header>
        <div style="background: #f7f7ff;" align="center">
            <h1 align="center" style="padding-top: 10px;">测试xxx1</h1>
            <p align="right" style="padding-right: 50px;">小青龙</p>
        </div>
    </header>


    <div class="row">
        <div class="col-12 col-lg-9 mx-auto"  >
            <h3 class="mb-0 text-uppercase h3Class">Action</h3>
            <hr/>
            <div class="card radius-10" >
                <div class="card-body">
                    <div class="d-flex align-items-center">

                        <div class="flex-grow-1 ms-3">

									<pre><font size="3" class ="preClass"></font></pre>
                            <ol type="A">

                            </ol>

                        </div>
                    </div>
                </div>
            </div>
            <div align="right">
                <input type="button" id="showNext" value="下一题" />
            </div>
        </div>






            <br>
            <br>

        </div>



    </div>

    <footer class="page-footer" style="background: #f7f7ff ;">
        <p class="mb-0">北京鲲翔互联网学院</p>
    </footer>

    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!--plugins-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
    <script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
    <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
    <!--app JS-->
    <script src="assets/js/app.js"></script>
</body>
<style>
    button{
        border-width: 0px;
    }
</style>


<script>
$(function (){

    var singleChoice = "";
    var manyChoice = "";
    var judgments = "";
    var fillBlanks = "";

    var obj = null;



    $.get("/toDemo",function (data){

        console.log(data[0]);
        console.log(data[1]);

        singleChoice = data[0];
        manyChoice = data[1];
        judgments = data[2];
        fillBlanks = data[3];

        obj = data;


        $(".preClass").text("点击下一题开始答题");


    })

    var listNum=0;
    var objNum=0;

    var num=0;


    $("#showNext").click(function (){

        if (listNum == 0){
            var selectedValue = "";
            var correctAnswer = "";

            if (objNum == singleChoice.length){
                objNum=0;
                $("input[type=radio]").off("change");
                listNum++;
            }else {


                $(".h3Class").text("单选题");
                $(".preClass").text(singleChoice[objNum].title);

                var arr = singleChoice[objNum].description.split(",");
                var lis = "";
                for (var i = 0; i < arr.length; i++) {
                    lis += "<li>" + arr[i] + "<input type='radio' name='description' value='" + arr[i] + "'></li>";
                }
                $("ol").html(lis);

                $("input[type=radio]").change(function() {
                     selectedValue = $(this).val();
                     correctAnswer = singleChoice[objNum-1].answer;
                     console.log(correctAnswer);
                    if (selectedValue == correctAnswer) {
                        num += singleChoice[objNum-1].score;
                        console.log("当前分数是：" + num);
                    }
                });

                //var ipt = $("input[name='description']");

                console.log("当前总分数是"+ num);

                objNum++;
            }

        }


        if (listNum == 1){

            if (objNum == manyChoice.length){
                objNum=0;
                $("input[type=checkbox]").off("change");
                listNum++;
            }else {
                $(".h3Class").text("多选题");
                $(".preClass").text(manyChoice[objNum].title);

                var arr = manyChoice[objNum].description.split(",");
                var lis = "";
                for (var i=0; i<arr.length; i++){
                    lis +=  "<li>" + arr[i] + "<input type='checkbox' name='description' value='" + arr[i] + "'></li>";
                }
                $("ol").html(lis);

                $("input[type=checkbox]").change(function() {
                    var selectedValue = "";
                    $.each($('input[type=checkbox]:checked'),function (){
                        selectedValue += $(this).val()+",";
                    })
                     selectedValue = selectedValue.slice(0, -1);
                    console.log(selectedValue);
                    var correctAnswer = manyChoice[objNum-1].answer;
                    if (selectedValue == correctAnswer) {
                        num += manyChoice[objNum-1].score;
                        console.log("当前分数是：" + num);
                    }

                });
                objNum++;
            }
        }

        if (listNum == 2){
            if (objNum == judgments.length){
                objNum=0;
                $("input[type=radio]").off("change");
                listNum++;
            }else {
                $(".h3Class").text("判断题");
                $(".preClass").text(judgments[objNum].title);
                var lis = "";
                lis +=  "<li>" + '对' + "<input type='radio' name='answer' value='"+ '对' +"'></li>";
                lis +=  "<br />";
                lis +=  "<li>" + '错' + "<input type='radio' name='answer' value='"+ '错' +"'></li>";
                $("ol").html(lis);


                $("input[type=radio]").change(function() {
                    var selectedValue = $(this).val();
                    var correctAnswer = judgments[objNum-1].answer;
                    console.log(selectedValue);
                    if (selectedValue == correctAnswer) {
                        num += judgments[objNum-1].score;
                        console.log("当前分数是：" + num);
                    }
                });

                objNum++;
            }


        }

        if (listNum == 3){
            if (objNum == fillBlanks.length){
                objNum=0;
                listNum++;
            }else {
                $(".h3Class").text("填空题");
                $(".preClass").text(fillBlanks[objNum].title);
                var lis = "";
                lis +=  "<input type='text' name='answer' placeholder='请输入内容'/>";
                $("ol").html(lis);

                $("input[type=text]").change(function() {
                    var selectedValue = $(this).val();
                    var correctAnswer = fillBlanks[objNum-1].answer;
                    console.log(selectedValue);
                    if (selectedValue == correctAnswer) {
                        num += fillBlanks[objNum-1].score;
                        console.log("当前分数是：" + num);
                    }
                });
                objNum++;
            }

        }
        if (listNum == 4){
            alert("答题结束");
            alert("最后得分" + num);
            return;
        }

    })


})


</script>
</html>